<template>
	<view>
		<view class="">
			<view class="swipe" @click="swipeClick()">
				<u-swiper :list="swiperList" keyName="image" indicator indicatorMode="line" circular height="380rpx"
					width='700rpx'></u-swiper>
			</view>

		</view>
		<view class="zuju">
			<u-sticky bgColor="#fff" style='top:0rpx'>
				<u-tabs :current="tabsIndex" @click="click" style="background-color: #FFFFFF;padding-bottom:10rpx"
					:list="list1" lineWidth="30" lineColor="#8438FC" :activeStyle="{
							color: '#8438FC',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;padding-bottom:5rpx">
				</u-tabs>
			</u-sticky>
		</view>
		<zuju :list='list' :urls='urls' :type='1'></zuju>

	</view>
</template>

<script>
	import zuju from '../../components/zuju_box.vue'
	export default {
		components: {
			zuju
		},
		data() {
			return {
				swiperList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg'
				],
				list: [{

					title: 'IGS. “资本1+1’ 游戏行',
					time: '2024-04-30 08:00',
					address: '云南省昆明市西山区',
					avatar: '../../static/icons/tou.png',
					image: '../../static/icons/h3.png',
					name: '凌柒',
					dec: '2020年5月29日前无发文的教育新作者，报名参与本计划、完整填写问卷信息',
					price: '1.00'
				}, {
					title: '美食大作战',
					time: '2024-03-30 08:00',
					address: '河南省郑州市高新区',
					avatar: '../../static/icons/tou.png',
					image: '../../static/icons/h2.png',
					name: '凌柒1',

					dec: '2020年5月29日前无发文的教育新作者，报名参与本计划、完整填写问卷信息',
					price: '2.00'
				}, {
					title: '王者荣耀官方年度对抗赛',
					time: '2024-04-03 08:00',
					address: '山西省吕梁市高新区',
					avatar: '../../static/icons/tou.png',
					image: '../../static/icons/h1.png',
					name: '凌柒2',
					dec: '2020年5月29日前无发文的教育新作者，报名参与本计划、完整填写问卷信息',
					price: '2.50'
				}],
				tabsIndex: 0,
				list1: [{
					name: '全部'
				}, {
					name: '城市活动'
				}, {
					name: '去户外'
				}, {
					name: '主题活动'
				}, {
					name: '新奇体验'
				}],
				page: 1,
				suo: true,

			}
		},
		onLoad() {
			this.swiper()
		},
		methods: {
			swiper() {
				this.$http.post('api/sys/banner').then(res => {
					this.swiperList = res
				})
			},
			click(e) {
				console.log(e)
				this.tabsIndex = e.index
				this.page = 1
				this.suo = true
				// this.twoDynamic()
			},
			todetial(item) {
				const params = (JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/zuju/zujudetail?params=${params}`
				})
			}
		},

	}
</script>

<style>
	.zuju {

		/* margin-top: -30rpx; */
		border-radius: 50rpx 50rpx 0 0;
		padding: 10rpx;
		background-color: #fff;
	}

	.zujulist {
		/* width: 100%; */
		/* height: 300rpx; */
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

	}

	.zujulist_box {
		margin-bottom: 10rpx;
	}

	.zujulist_l {
		margin-right: 20rpx;
	}

	.zujulist_l_image {
		width: 300rpx;
		height: 240rpx;
		border-radius: 20rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
	}

	.time {
		font-size: 30rpx;
		color: #666666;
		margin: 10rpx 0;
	}

	.address {
		font-size: 30rpx;
		color: #666666;
		margin: 10rpx 0;
	}

	.zuju_group {
		padding: 20rpx;
		padding-top: 30rpx;
		border-top: 2rpx solid #eee;
		justify-content: space-between;
	}

	.zuju_group_r {
		margin-right: 30rpx;
		text-align: center;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #A973FF;
		border-radius: 60rpx;
		opacity: 1;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>